<template>
    <div>
        <!--        我的相册-->
        <dao-hang></dao-hang>
        <div style="display: flex;">
            <div style="flex: 1%;"></div>
            <!--                中央布局内-->
            <div style="background-color: white;width: 1730px; margin-top:90px;margin-right:120px;flex:12;border-radius: 4px;display: flex;margin-bottom: 150px;">

                <div style="margin-left: 150px;margin-top: 50px;margin-right: 100px;">
                    <el-image style="width: 1500px;height: 800px;margin-left: 50px;"
                              src="https://img2.baidu.com/it/u=1084794618,4144773300&fm=26&fmt=auto&gp=0.jpg"></el-image>


                    <div style="margin-top: 100px;margin-left: 200px;margin-right: 180px;">
                        <el-image style="width: 200px;height: 200px;position:absolute;top: 870px;"
                                  :src="userInfo.ima"></el-image>
                        <h2 style="width: 200px;">昵称：{{userInfo.name}}</h2>

                        <div>

                            <el-button @click="Inseim = true">上传照片</el-button>

                            <el-dialog title="新建图片" :visible.sync="Inseim">
                                <!--                <div style="padding: 20px;background-color: #bcbec2"><h2>新建相冊</h2></div>-->
                                <el-form v-model="InserIma">

                                    <el-form-item label="选择相册名">
                                        <br>
                                        <el-select v-model="MyblogTitle" placeholder="请选择">
                                            <el-option
                                                    v-for="item in Myblog"
                                                    :key="item.id"
                                                    :label="item.title"
                                                    :value="item.title">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <p>需要上传的图片</p>
                                    <el-form-item>
                                        <el-upload
                                                drag
                                                :action="`${this.$axios.defaults.baseURL}/api/file/upload`"
                                                :on-success="onSuccess"
                                                ref="refed"
                                                multiple>
                                            <i class="el-icon-upload"></i>
                                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                                        </el-upload>

                                        <el-image :src="imgSrc" tyle="background-size: 100%;"></el-image>

                                    </el-form-item>

                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button type="primary" @click="InserIma()">确定</el-button>
                                    <el-button @click="dialogFormVisible = false">取消</el-button>
                                </div>

                            </el-dialog>


                            <el-button @click="dialogFormVisible = true" style="margin-left: 50px;">新建相册</el-button>


                            <el-row style="width: 1500px; ">
                                <el-col :span="9"
                                        v-for="(item, index) in Myblog.slice((imacurrentPage-1)*imaPageSize,imacurrentPage*imaPageSize)"
                                        :key="index" :offset="index > 0 ? 3 : 0"
                                        style="width: 390px;margin-left: 20px;">
                                    <el-card style="margin-top: 50px;padding: 0px;">
                                        <span style="font-size: 30px;">{{item.title}}</span>
                                        <el-button style="float:right;font-size: 15px;color:#409EFF;">作者：{{item.name}}
                                        </el-button>
                                        <div style="margin-top: 10px;">
                                            <el-image style="width:350px;height: 250px;overflow: auto;padding: 0px;"
                                                      :src="item.image"></el-image>
                                        </div>

                                        <div>
                                            <el-button type="danger" @click="Deleteima(item.id)" style="float: right"
                                                       icon="el-icon-delete" circle></el-button>
                                            <span style="margin-left: 50px;">{{item.date}}</span>

                                        </div>

                                    </el-card>
                                </el-col>
                            </el-row>

                            <el-pagination @size-change="handleSizeChange"
                                           @current-change="handleCurrentChange"
                                           :current-page="imacurrentPage"
                                           :page-sizes="imapageSizes"
                                           :page-size="imaPageSize" layout="total, sizes, prev, pager, next, jumper"
                                           :total="toCount"
                                           style="margin-left: 580px;margin-top: 10px;margin-bottom: 20px">
                            </el-pagination>


                            <el-dialog title="新建相冊" :visible.sync="dialogFormVisible">


                                <!--                <div style="padding: 20px;background-color: #bcbec2"><h2>新建相冊</h2></div>-->
                                <el-form v-model="creaPhote">

                                    <el-form-item label="标题">
                                        <br>
                                        <el-input autocomplete="off" v-model="creaPhote.title"
                                                  style="width: 300px;"></el-input>
                                    </el-form-item>
                                    <p>相册封面</p>
                                    <el-form-item>
                                        <el-upload
                                                drag
                                                :action="`${this.$axios.defaults.baseURL}/api/file/upload`"
                                                :on-success="onSuccess"
                                                ref="refed"
                                                multiple>
                                            <i class="el-icon-upload"></i>
                                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                                        </el-upload>

                                        <el-image :src="imgSrc" tyle="background-size: 100%;"></el-image>

                                    </el-form-item>

                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button type="primary" @click="submitForm">确定</el-button>
                                    <el-button @click="dialogFormVisible = false">取消</el-button>
                                </div>

                            </el-dialog>
                        </div>


                    </div>


                </div>
            </div>
            <div style="flex: 1%;"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "myphote",
        data() {
            return {

                url: this.$axios.defaults.baseURL,
                MyblogTitle: '',
                dialogImageUrl: '',
                Inseim: false,
                dialogVisible: false,
                dialogTableVisible: false,
                dialogFormVisible: false,
                fileList: [{
                    name: 'food2.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                }],
                creaPhote: {},
                userInfo: {},
                imgSrc: require('../ima/4.jpg'),
                Bid: '',
                Myblog: [],
                Inserima: {},


                showPhote: {},
                toCount: 1,
                imaPageSize: 6,
                imapageSizes: [1, 2, 3, 6],
                imacurrentPage: 1,
            }
        },
        created() {
            this.$axios.get("/api/user/main/info", {headers: {TOKEN: this.token}}).then(res => {
                this.Bid = this.userInfo.id;
                this.userInfo = res.data.data;
                this.ShowMyPhote();//很鸡贼
            });

        },
        methods: {
            //上传新图片
            InserIma() {
                let id = 0;
                for (let i = 0; i < this.Myblog.length; i++) {
                    if (this.MyblogTitle == this.Myblog[i].title) {
                        id = this.Myblog[i].id
                    }
                }
                this.Inserima.imaid = id;
                this.Inserima.imagecode = this.imgSrc;
                this.Inserima.type = this.MyblogTitle;//拿不到这个title
                this.Inserima.Mid = this.Bid;
                this.$axios.post("/api/MyIma/InserIma", this.Inserima).then(res => {
                    console.log(this.Inserima)
                    if (res.data.status === 1) {
                        this.$message.success(res.data.msg);
                        location.reload();
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            },
            handleSizeChange(val) {
                // 改变每页显示的条数
                this.imaPageSize = val
                // 在改变每页显示的条数时，要将页码显示到第一页
                this.imacurrentPage = 1
            },
            // 显示第几页
            handleCurrentChange(val) {
                // 改变默认的页数
                this.imacurrentPage = val
            },

            onSuccess(res) {
                //            http://localhost:8090          /api/file/md5
                this.imgSrc = this.$axios.defaults.baseURL + res.data.url;
                console.log(res);
            },

            submitForm() {
                //这里摁死插入不进去
                this.creaPhote.name = this.userInfo.name;//令Imag表的Name名等于当前用户名
                this.creaPhote.Bid = this.userInfo.id;
                this.creaPhote.image = this.imgSrc;
                // this.fileList.path = this.creaPhote.image; //插不进去
                // console.log(this.fileList.path) //这个获取不到 undefind
                this.$axios.post("/api/phote/creatphote", this.creaPhote).then(res => {
                    if (res.data.status === 1) {
                        this.$message.success(res.data.msg);
                        this.$router.push('/index');
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            },
            //展示相册
            ShowMyPhote() {
                this.Bid = this.userInfo.id;
                this.$axios.post("/api/phote/showMyblog", {Bid: this.Bid}).then(res => {
                    this.Myblog = res.data.data;
                    console.log(this.Myblog)
                    this.toCount = this.Myblog.length;
                })
            },


            Deleteima(id) {
                if (confirm("确认删除嘛?")) {
                    this.$axios.post("/api/phote/photeto/" + id).then(res => {
                        if (res.data.status === 1) {
                            this.$message.success(res.data.msg);
                            this.ShowMyPhote();
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    })
                }

            }


        },


    }
</script>

<style scoped>

</style>